<template>
    <div class = "dest_box">
        <div class = "banner_box">
            <van-image :src ="img[0]" width = "100%;" height = "50vw" fit = "cover" lazy-load />
        </div>
        <entryTitle></entryTitle>
        <div class = "reco_box">
            <div class = "reco_title">玩乐推荐</div>
            <van-grid :border="false" :column-num="3">
                <van-grid-item @click = "trip_way('徒步')" :class = "{active: way == '徒步' ? true : false}" >
                    <van-image :src="img[1]" fit="cover" />
                    <span>徒步</span>
                </van-grid-item>
                <van-grid-item @click = "trip_way('自驾')" :class = "{active: way == '自驾' ? true : false}" >
                    <van-image :src="img[2]" fit="cover" style = "borderRadius: 5px;" />
                    <span>自驾</span>
                </van-grid-item>
                <van-grid-item @click = "trip_way('游轮')" :class = "{active: way == '游轮' ? true : false}">
                    <van-image :src="img[3]" fit="cover"  />
                    <span>游轮</span>
                </van-grid-item>
                <van-grid-item @click = "trip_way('骑行')" :class = "{active: way == '骑行' ? true : false}">
                    <van-image :src="img[4]" fit="cover"  />
                    <span>骑行</span>
                </van-grid-item>
                <van-grid-item @click = "trip_way('蜜月')" :class = "{active: way == '蜜月' ? true : false}" >
                    <van-image :src="img[5]" fit="cover"  />
                    <span>蜜月</span>
                </van-grid-item>
                <van-grid-item @click = "trip_way('亲子游')" :class = "{active: way == '亲子游' ? true : false}">
                    <van-image :src="img[6]" fit="cover"  />
                    <span>亲子游</span>
                </van-grid-item>
            </van-grid>
        </div> 
        <!-- 瀑布流 -->
        <div class="content">
            <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="show_card">
                <div><van-image style = "margin-left: 20px;" height = "150" width = "130" src = "http://images.mafengwo.net/images/hotel/pc_app_guide/qrcode_new_user_coupon.png"></van-image></div>
                <van-cell class="list" v-for = "(item, i) of show_data" :key = "i" >
                    <van-image class="img"
                        lazy-load
                        :src="item.image"
                        />
                    <div class="title">{{item.title}}</div>
                    <div class="con">{{item.lable}}</div>
                </van-cell>
            </van-list>
            
        </div>
    </div>
</template>

<script>
import entryTitle from '../commonality/entry_title.vue'
 
export default {
    name: 'WorkspaceJsonDest',

    components: {
        entryTitle
    },
    data() {
        return {
            page: 1,
            s_opacity: 0,
            show_data: [],
            way: '',
            finished: false,
            loading: false,
            img: [
                require('../assets/dest_banner.jpeg'),
                require('../assets/tb.jpeg'),
                require('../assets/zj.jpeg'),
                require('../assets/yl.jpeg'),
                require('../assets/qx.jpeg'),
                require('../assets/my.jpeg'),
                require('../assets/qzy.jpeg')


            ]
        };
    },
    created() {
        
        this.$bus.emit('search_opacity', 0);            //多次进入目的地页面依然让搜索框先变成透明，并且fixed
        this.$bus.emit('search_position', 'fixed');

    },
    mounted() {
        window.addEventListener("scroll", this.show_search ),
        setTimeout(() => {
            document.documentElement.scrollTop += 1;
        }, 10);
    },
    beforeDestroy() {
        setTimeout(() => {          //目的地页面销毁前，因为scrollY会变成0，导致搜索框透明度变成0，所以手动给搜索框透明度传值
            this.$bus.emit('search_opacity', 1);
            this.$bus.emit('search_position', 'static');
        }, 10)
    },
    methods: {
        
        show_search() {             //屏幕向上滚动，搜索框背景渐入渐出
            let scrollY = document.documentElement.scrollTop;
            let screenX = document.body.clientWidth;
            if( scrollY < (screenX / 2) ) {
                this.s_opacity = (scrollY ) / (screenX / 2);
                this.$bus.emit('search_opacity', this.s_opacity)            //发送搜索框的背景透明度数据到搜索框组件
            }
        },
        trip_way(way) {             //选择出行方式，渲染底下展示框
            this.$toast.loading({           //toast加载提示
                message: '加载中...',
                forbidClick: true,
            });
            this.way = way;
            this.page = 1;
            this.$http.post('/destCardMode', {mid: 1, way: way}).then(result => {         //按出行方式筛选展示内容
                this.show_data = result.data.data;
                this.$toast.clear();            //数据请求完毕关闭提示 
            })
        },
        show_card(way) {                //触底加载
            if(this.way == "") {
                this.$toast.loading({           //toast加载提示
                    message: '加载中...',
                    forbidClick: true,
                });
                this.$http.post('/destCardPage', {mid: this.page}).then(result => {         //初始页面加载瀑布流数据
                    this.show_data.push(...result.data.data)

                    this.page += 1;
                    this.loading = false;           //加载状态结束
                    this.$toast.clear();            //数据请求完毕关闭提示 
                    if(result.data.data.length == 0) {
                        this.finished = true;
                        this.$toast.success('到底了');           //toast加载提示
                        
                    }
                })
            } else {                //选择出行方式后触底加载
                this.$toast.loading({           //toast加载提示
                    message: '加载中...',
                    forbidClick: true,
                });
                this.way = way;
                this.page += 1;
                this.$http.post('/destCardMode', {mid: this.page, way: way}).then(result => {         //按出行方式筛选展示内容
                    this.show_data.push(...result.data.data);
                    this.$toast.clear();            //数据请求完毕关闭提示 
                    this.loading = false;           //加载状态结束
                    if(result.data.data.length == 0) {
                        this.finished = true;
                        this.$toast.success('到底了');           //toast加载提示
                        
                    }
                })
            }
        }
    },
};
</script>

<style lang="scss" scoped>
   .dest_box {
       .reco_box {
           margin-top: 10px;
           .reco_title {
               box-sizing: border-box   ;
               width: 100%;
               background: #fff;
               padding: 8px;
               padding-bottom: 0;
               font-size: 20px;
               color: #646566;
           }
        }
        .content{   
            margin-top: 20px;
            padding: 0 8px;
            box-sizing: border-box;
            column-count: 2;
            border-top: 1px solid #f4f4f4;
            .list {
                break-inside: avoid;
                height: 224px;
                color: #646566;
                font-size: 14px;
                border-radius: 12px;
                border: 1px solid #DCDCDC;

           
                >.img {
                    width: 100%;
                    height: 108px;
                    border-radius: 12px 12px 0 0;
                }
     
                .title {
                    margin-left: 15rpx;
                    margin-right: 15rpx;
                    padding-left: 7px;
                    height: 45px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    
                }
                .con{
                    padding-top: 10px;
                    padding-left: 4px;
                    margin: 15rpx;
                    margin-top: 20rpx;
                    display: flex;
                    font-size: 12px;
                    align-items: center;
                    justify-content: space-between;
                    color: #41c1ec;
                }
            }
        }
    }   
    
    
    
</style>
<style>
    #app .nav-heard-wrap {
        position: fixed;
        top: 0;
        z-index: 100;
        background: rgba(248, 248, 248, 0);

    }
    #app .nav-heard-wrap .search-wrap {
        background: rgba(255, 255, 255, 0.3);
    }
    
    .reco_box .van-grid-item__content  {
        padding-bottom: 0;
        color: #646566;

    }
    .reco_box .van-grid .active span {
        color: #41c1ec;
    }
    .reco_box .van-grid-item__content .van-image img {
        border-radius: 15px;

    }
    .content .van-cell {
        padding: 0;
        background: none;
        padding-bottom: 5px;
        margin-bottom: 20px;
    }
</style>